<template>
	<div id="container">
		<header>
			<van-nav-bar title="收藏夹" left-text="返回" left-arrow @click-left="onClickLeft" />
		</header>
		<div id="content">
			<van-tabs animated>
				<van-tab v-for="index in arr" :title="index" :key="index">
				<!-- 收藏版 -->
				<div class="bookmark-item">
					<van-icon  name="gold-coin-o" />
					<h3>这年头，谁没有几个心头爱</h3>
					<h4>从众而活是一场大规模的囚徒困境</h4>
				</div>
				</van-tab>

			</van-tabs>
			
		</div>
	</div>
</template>

<script>
	
	export default {
		name: "Bookmark",
		data(){
			return{
				
				index:'',
				arr:[
					'商品',
					'店铺'
				]
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped>
	#container {
		height: 100vh;
		background: #F3F3F3;
	}

	/* ---------------------order-header--------------- */
	header .van-nav-bar {
		height: 70px;
	}

	header .van-icon-arrow-left {
		color: #373737;
		font-size: 18px;
		font-weight: 600;
	}

	header .van-nav-bar__text {
		color: #373737;
		font-size: 18px;
		font-weight: 600;
		font-family: "楷体";
		line-height: 70px;
	}

	header .van-nav-bar__title {
		font-size: 22px;
		font-weight: 700;
		font-family: "楷体";
		color: #414141;
		line-height: 70px;
	}
/* ----------------bookmark-tab---------------- */
/* -------------------bookmark-tab----------------- */
.bookmark-item {
	text-align: center;
}
.bookmark-item .van-icon-gold-coin-o{
	font-size: 150px;
	color: #c0c4c7;
	margin-top:120px;
}
.bookmark-item h3{
	font-family: "楷体";
	font-size: 20px;
	color: #2b2b2b;
	font-weight: 600;
}
.bookmark-item h4{
	font-family: "楷体";
	font-size: 15px;
	color: #989898;
}

</style>
